import React from 'react';
import { Row, Form, Input, Button, Col } from 'antd';
import InlineSVG from 'svg-inline-react';
import styles from './index.less';

const FormItem = Form.Item;

class Login extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
    };
  }



  handleOk() {
    const { form, onLogin } = this.props;
    form.validateFields(((err, values) => {
        if(!err){
            onLogin(values);
        }
    }));
  }
  handleLogin(e) {
    const evt = e || window.event; // 获取event对象
    if (evt.keyCode === 13) {
      this.handleOk();
    }
  }

  render() {
    const { form, loading, captcha, changeCaptcha } = this.props;
    const { getFieldDecorator } = form;
    
    return (
      <div className={styles.login}>
        <div
          className={styles.wrap}
          onKeyDown={e => this.handleLogin(e)}
        >
          <div className={styles.tit}>
            后台管理系统
          </div>
          <FormItem>
            {getFieldDecorator('username', {
                    rules: [{
                    required: true,
                    message: '请填写用户名'
                    }]
                })(<Input placeholder="用户名" />)}
          </FormItem>
          <FormItem >
            {getFieldDecorator('password', {
                    rules: [{
                    required: true,
                    message: '请填写密码'
                    }]
                })(<Input type="password" placeholder="密码" />)}
          </FormItem>
          <FormItem >
            <Row gutter={16}>
              <Col span="12">
                <FormItem>
                  {getFieldDecorator('captcha', {
                    rules: [{
                    required: true,
                    message: '请填写验证码'
                    }]
                  })(<Input placeholder="验证码" />)}
                </FormItem>
              </Col>
              <Col span="12" style={{height: 32}}>
                <InlineSVG
                  src={captcha}
                  onClick={() => changeCaptcha()}
                />
              </Col>
            </Row>
          </FormItem>
          <Row>
            <Button
              type="primary" 
              onClick={() => this.handleOk()} 
              loading={loading.login}
              style={{width: '100%'}}
            >
              登录
            </Button>
          </Row>
        </div>
      </div>
    );
  }
}

export default Form.create({})(Login);
